<template>
  <div ref="scrollview" class="recreation-container">
    <div class="recreation-box">
      <ul id="typeUlId">
        <li v-for="item in typeList" :key="item.worksId">
          <div style="position: relative">
            <div class="recreation-cover-box">
              <img :src="item.coverPath" />
              <div class="recreation-cover-main">
                <img :src="item.coverPath" />
              </div>
            </div>
            <div class="recreation-number">
              <span class="iconfont icon-aixin">{{ item.likeCounts }}</span>
              <span class="recreation-time">{{
                item.worksSeconds | formatSec
              }}</span>
            </div>
          </div>
          <p class="recreation-title">
            {{ item.worksDesc
            }}<template v-for="topic in item.topicList">
              #{{ topic.topicTitle }}</template
            >
          </p>
          <p class="recreation-source">
            @中国青年报<i>-</i>{{ item.updateTime | formatDate }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { getTypeListApi } from "@/api/menu";
import { getSimpleRandomWorksListApi } from "@/api/hot";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      typeList: [],
      typeId: this.$route.query.typeId,
      currentScrollHeight: 0,
    };
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      // let date = new Date(time);
      var data = new Date(time);
      var dateTimeStamp = data.getTime();
      var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
      var hour = minute * 60;
      var day = hour * 24;
      // var week = day * 7;
      // var month = day * 30;
      // var year = month * 12;
      var now = new Date().getTime(); //获取当前时间毫秒
      var diffValue = now - dateTimeStamp; //时间差

      var result = "";
      if (diffValue < 0) {
        result = "" + "未来";
      }
      var minC = diffValue / minute; //计算时间差的分，时，天，周，月
      var hourC = diffValue / hour;
      var dayC = diffValue / day;
      // var weekC = diffValue / week;
      // var monthC = diffValue / month;
      // var yearC = diffValue / year;

      if (dayC >= 1 && dayC <= 6) {
        result = " " + parseInt(dayC) + "天前";
      } else if (hourC >= 1 && hourC <= 23) {
        result = " " + parseInt(hourC) + "小时前";
      } else if (minC >= 1 && minC <= 59) {
        result = " " + parseInt(minC) + "分钟前";
      } else if (diffValue >= 0 && diffValue <= minute) {
        result = "刚刚";
      } else {
        return formatDate(data, "yyyy年MM月dd日");
      }
      return result;
      // return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    formatSec(time) {
      const min =
        parseInt((time % 3600) / 60) < 10
          ? "0" + parseInt((time % 3600) / 60)
          : parseInt((time % 3600) / 60);
      const sec =
        parseInt((time % 3600) % 60) < 10
          ? "0" + parseInt((time % 3600) % 60)
          : parseInt((time % 3600) % 60);
      return min + ":" + sec;
    },
  },
  created() {
    this.getTypeListFun();
  },
  mounted() {
    var rightmain = document.querySelector("#rightmain");
    rightmain.style.position = "static";
    var that = this;
    window.addEventListener(
      "scroll",
      () => {
        let s = document.documentElement.scrollTop || document.body.scrollTop;
        this.currentScrollHeight = s;
        if (that.fScrollTop()) {
          that.getTypeListFun();
        }
      },
      true
    );

    // const scrollview = this.$refs["scrollview"];
    // 添加滚动监听，该滚动监听了拖拽滚动条
    // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
  },
  methods: {
    fScrollTop() {
      var ul = document.getElementById("typeUlId");
      if (ul != null) {
        var item = ul.getElementsByTagName("li");
        var lastItem = item[item.length - 1];
        var clientHeight = document.documentElement.clientHeight;
        var clientWidth = ul.offsetWidth;
        var scrollTop = document.documentElement.scrollTop;
        if (item.length <= 0) {
        return false
      }
        var itemWidth = item[0].offsetWidth;
        var len = this.typeList.length;
        var row = Math.ceil(len / (clientWidth / (itemWidth + 22)));
        var heightSize = row * 321;
        if (this.currentScrollHeight < heightSize - clientHeight) {
          return false;
        } else {
          return true;
        }
      }
    },
    throttle(func, wait, mustRun) {
      var timeout,
        startTime = new Date();

      return function () {
        var context = this,
          args = arguments,
          curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          func.apply(context, args);
          startTime = curTime;
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait);
        }
      };
    },
    getSimplyRandomWorksList() {
      getSimpleRandomWorksListApi().then((res) => {
        if (res.data.code == 200) {
          this.typeList = this.typeList.concat(res.data.data);
        }
      });
    },
    getTypeListFun() {
      getTypeListApi({
        userId: this.userInfo.userId,
        typeId: this.typeId,
      }).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data == null || res.data.data.length == 0) {
            // 提示用户将为您提供推荐数据
            this.$message({
              type: "info",
              message: "将为您提供推荐作品",
            });
            this.getSimplyRandomWorksList();
          } else {
            this.typeList = this.typeList.concat(res.data.data);
          }
          // console.log(res.data.data, "getTypeListApi");
          // this.typeList = res.data.data;
        }
      });
    },
  },
};
</script>

<style>
.recreation-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background: #161823;
}
/* .recreation-container::-webkit-scrollbar {
  display: none;
} */
.recreation-box {
  width: 96%;
  margin: auto;
}
.recreation-container ul {
  display: flex;
  flex-wrap: wrap;
}
.recreation-box ul li:hover {
  background: #33343f;
}
.recreation-container ul li {
  cursor: pointer;
  list-style: none;
  width: 18%;
  border-radius: 5px;
  height: 305px;
  float: left;
  margin: 8px 13px;
  color: #fff;
  background: #252632;
}
.recreation-container ul li > div {
  height: 220px;
  overflow: hidden;
  border-radius: 5px;
}
.recreation-cover-box > img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  /* height: 220px; */
  filter: blur(8px);
}

.recreation-cover-main > img {
  position: absolute;
  width: 100%;
  height: 220px;
  z-index: 99;
  top: 0;
  object-fit: contain;
  border-radius: 5px 5px 0 0;
}
.recreation-container ul li > div > div > img {
  width: 100%;
  height: 220px;
  border-radius: 5px 5px 0 0;
}
.recreation-title {
  height: 35px;
  font-size: 14px;
  padding: 8px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  display: -webkit-box;
}
.recreation-source {
  font-size: 12px;
  color: rgb(153 153 153);
  margin: 6px 0 10px 10px;
}
.recreation-source i {
  margin: 0 8px;
}
.recreation-number {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  bottom: 0;
  height: 48px;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  z-index: 100;
}
.recreation-number span {
  align-items: center;
  bottom: 4px;
  color: #fff;
  display: flex;
  flex-direction: row;
  font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  left: 8px;
  line-height: 22px;
  position: absolute;
}
.recreation-number .icon-aixin:before {
  margin-right: 2px;
}
/* .recreation-number span:before{
  content:'\e8ab;';
  color: #fff;
} */
.recreation-time {
  right: 8px;
  margin-left: auto;
  background: #4f4f4f;
  height: 22px;
  border-radius: 7px;
  /* float: right; */
  width: 45px;
}
</style>
